<template>
  <div class="header">
    <el-menu :default-active="$route.path" background-color="#f7dc18" text-color="#000" active-text-color="#fff" class="el-menu-demo" mode="horizontal">
      <div class="logo_box">
        <h1 class="logo">留言板</h1>
      </div>
      <!-- <button>{{time}}</button> -->

      <el-menu-item index="/" @click="goto('/')">首页</el-menu-item>
      <el-submenu index="1">
        <template #title>管理面板</template>
        <el-menu-item index="/admin" @click="goto('/admin')">查看留言</el-menu-item>
        <el-menu-item index="/check" @click="goto('/check')">留言详情</el-menu-item>
      </el-submenu>

      <el-submenu index="2" v-if="userName || $store.state.userName" class="nav_right_item">
        <template #title>欢迎，{{userName || $store.state.userName}}</template>
        <el-menu-item index="2-1" @click="useLogout">注销</el-menu-item>
      </el-submenu>

      <el-menu-item index="/login" @click="goto('/login')" class="nav_right_item" v-else>登录</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
  props: ['time'],
  setup(props) {
    const router = useRouter()
    const { proxy } = getCurrentInstance()

    const state = reactive({
      userName: '',
    })

    const goto = (url) => {
      router.push(url)
    }

    const useLogout = () => {
      proxy.storage.removeLocal('17003334_user')
      proxy.$store.commit('loginMut', '')
      state.userName = ''
      proxy.$message.success('注销成功')
      proxy.$router.push('/')
    }

    onMounted(() => {
      state.userName = proxy.storage.getLocal('17003334_user') || ''
    })

    return {
      ...toRefs(state),
      goto,
      useLogout,
    }
  },
}
</script>

<style lang='scss' scoped>
.header {
  position: relative;
  margin-bottom: 10px;

  .logo_box {
    float: left;
    height: 60px;
    line-height: 60px;
    margin: 0 18px 0;
    font-size: 14px;
    color: #303133;
    padding: 0 20px;
    // cursor: pointer;
    box-sizing: border-box;
    position: relative;
    white-space: nowrap;
    list-style: none;
  }

  .el-menu-item:first-child {
    margin-right: 40px;
    &:hover {
      background-color: #f7dc18 !important;
    }
    .logo {
      position: relative;
      top: 0;
    }
  }
  .nav_right_item {
    float: right;
  }
}
</style>